<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24 本科 3 班 康建辉 的网站！</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="./css/bootstrap-grid.min.css"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        #xiaohui {
            width: 200px;
            height: 50px;
        }

        #login-left>img {
            width: 400px;
            height: 250px;
        }

        #login-right {
            margin: 0px auto;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="row py-5">

                <div class="col">
                    <img src="./img/校徽and名字.png" id="xiaohui" alt="山河大学校徽">
                </div>
                <div class="col-6">

                </div>
                <div class="col">

                </div>
            </div>
        </header>

        <div class="row py-5">

            <div class="col-7" id="login-left">
                <img src="./img/login.webp" alt="login" class="d-grid mx-auto">
            </div>
            <div class="col" id="login-right">
                <div class="logo" style="text-align: center;">
                    <img src="./img/山河大学校徽.webp" alt="山河大学校徽" style="width: 100px; height: 100px;">
                </div>
                <h4 class="form-title" style="text-align: center;">山河大学Web登录</h4>
                <form action="./index.html" method="post" id="form1">
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                            <input type="text" class="form-control" placeholder="用户名" maxlength="16" name="username"
                                id="username">
                        </div>
                        <span class="cardInfo info d-block mt-1"></span>
                    </div>

                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                            <input type="password" class="form-control" placeholder="密码" name="password" id="pwd">
                        </div>
                        <span class="pwdInfo info d-block mt-1"></span>
                    </div>

                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="rememberMe">
                        <label>记住我</label>
                    </div>

                    <div class="d-flex gap-3 mt-3">
                        <button type="button" class="btn btn-secondary btn-register flex-grow-1"
                            onclick="window.location.href='./register.html'">注册</button>
                        <button type="submit" class="btn btn-primary btn-login flex-grow-1" id="btnLogin">登录</button>
                    </div>

                    <div class="mt-3 text-center">
                        <a href="#" class="text-decoration-none">忘记密码?</a>
                    </div>
                </form>
            </div>
        </div>
        <div class="row py-5">
            <div class="col">
                <p style="text-align: center;font-size: 20px;"><strong>山河大学欢迎每一位莘莘学子</strong></p>
            </div>

        </div>
    </div>

    <script>
        var btnLogin = document.getElementById("btnLogin");
        btnLogin.addEventListener('click', function () {
            document.getElementById('form1').action = './index.html';
            document.getElementById('form1').submit();
        })
        const username = document.getElementById("username");
        const pwd = document.getElementById("pwd");
        const form1 = document.getElementById("form1");

        // 焦点样式
        username.addEventListener('focus', function () {
            this.style.backgroundColor = "azure";
        });
        pwd.addEventListener('focus', function () {
            this.style.backgroundColor = "azure";
        });

        // 绑定验证事件
        username.addEventListener('blur', checkCard);
        pwd.addEventListener('blur', checkPwd);

        form1.addEventListener('submit', checkForm);

        // function checkForm(e) {
        //     e.preventDefault();
        //     // 先手动触发验证
        //     const cardValid = checkCard.call(username);
        //     const pwdValid = checkPwd.call(pwd);
        //     console.log("cardValid:", cardValid, "pwdValid:", pwdValid);
        //     var formInfo = document.querySelector('.formInfo');
        //     if (cardValid && pwdValid) {
        //         //window.location.href = "./index.html";
        //         // 使用setTimeout确保UI更新后再跳转
        //         setTimeout(() => {
        //             window.location.href = "index.html";
        //         }, 100);
        //     } else {
        //         formInfo.textContent = "输入错误。请重新输入！";
        //         formInfo.style.color = "red";
        //     }
        // }

        function checkCard() {
            const cardPattern = /^[a-zA-Z0-9]{4,16}$/;
            var cardInfo = document.querySelector('.cardInfo');
            if (cardPattern.test(this.value)) {
                cardInfo.textContent = "账号输入正确";
                cardInfo.style.color = "lightblue";
                return true;
            } else {
                cardInfo.textContent = "账号输入错误，请重新输入";
                cardInfo.style.color = "red";
                this.focus();
                return false;
            }
        }

        function checkPwd() {
            var pwdInfo = document.querySelector('.pwdInfo');
            const pwdPattern = /^(?=.*[A-Za-z])(?=.*\d).{8,14}$/;
            // 统一使用 this.value 而不是 pwd.value
            if (pwdPattern.test(this.value)) {
                pwdInfo.textContent = "密码输入正确";
                pwdInfo.style.color = "lightblue";
                return true;
            } else {
                pwdInfo.textContent = "密码输入错误";
                pwdInfo.style.color = "red";
                this.focus();
                return false;
            }
        }

        document.querySelector('.btn-register').addEventListener('click', function () {
            document.getElementById('form1').action = './register.html';
            document.getElementById('form1').submit();
        });
    </script>
</body>

</html>